﻿.archive-page {
    font-size: 1rem;

    .archive-page-content {
        h2 {
            font-size: 1rem;
            height: 2rem;
            margin-top: 2.5rem;
            margin-bottom: 0.75rem;
            line-height: 2rem;

            &:before {
                   width: .75rem;
                height: .75rem;
                color: $color-warning;
                margin-right: .25rem;
                @include fontawesome("\f09e");
            }
        }

        img {
            display: none;
        }
    }

    ul {
        @include unstyled;
        @include clearfix;

        li {
            float: left;
            width: 33%;
            list-style: disc inside;
        }
    }

    table {
        width: 100%;
        border-collapse: collapse;

        th {
            background: #ddd;
            text-transform: uppercase;
            border: 1px solid #ddd;
            padding: 0.25rem;
            text-align: center;
            font-weight: normal;
            font-size: 0.875rem;

            &:first-child {
                width: 7rem;
            }
        }

        td {
            border: 1px solid #ddd;
            font-size: 0.875rem;
            padding: 0.25rem;
        }
    }

    .date {
        width: 6rem;
        text-align: center;
    }

    .comments {
        width: 6rem;
        text-align: center;
    }

    .rating {
        width: 6rem;
        text-align: center;
    }

    a {
        color: #333;

        &:hover {
            color: $color-theme;
        }
    }

    @media screen and (max-width: 48rem) {
        ul {
            display: none !important;
        }
    }

    @media screen and (max-width:40rem) {
        .comments, .date, .rating {
            display: none !important;
        }

        table {
            th {
                text-align: left;

                &:first-child {
                    display: none;
                }
            }
        }
    }
}
